<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>素材图片管理</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
		<!--ios是否运行创建快捷启动方式-->
		<meta content="yes" name="apple-mobile-web-app-capable">
		<!--ios顶部通知栏的样式 黑色-->
		<meta content="black" name="apple-mobile-web-app-status-bar-style">
		<!--遇到数字不让转成电话号码格式-->
		<meta content="telephone=no" name="format-detection">
		<script src="js/remstyle.js"></script>
		<link rel="stylesheet" type="text/css" href="common/css/base.css" />
		<link rel="stylesheet" type="text/css" href="css/open_btn.css" />
		<link rel="stylesheet" type="text/css" href="css/material_photo_manage.css" />
		<link rel="stylesheet" href="css/cropper.min.css">
		<link rel="stylesheet" href="css/ImgCropping.css">
		<script src="js/config.js"></script>
		<script type="text/javascript" src="js/vue.js"></script>
<link rel="stylesheet" href="css/sameInfo.css" />
	</head>
	<style>
	.no_photos{

		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 3rem;
		text-align: center;
		
	}
		.no_photos img{
			width: 3rem;
			height: auto;
			margin: 0 auto;
			
		}
		.no_photos span{
			margin-top: 0.5rem;
			font-size: 0.3rem
		}
		#bgMask{
			position: fixed !important;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			
		}
	</style>

	<body>
		<!--顶部-->
		<div class="top">
			<div class="top-one" onclick="javascript :history.back(-1);">
				<span><img src="img_page/right.png"/></span>
			</div>
			<!--<div class="point">
				管理
			</div>-->
		</div>
		<!--内容-->
		<div id="my_material_all" class="material_all" >
			<div class="material_con" v-for="(v,index) in material_list" :data-id="v.id" @click="choose_del(index)">
				<img :src="v.img_url" />
				<p>2018-12-25</p>
				<!--点击图片遮罩层-->
				<div class="photo_hover">
					<label class="one_choose"><input type="checkbox" name="sex" value="male" /></label>

				</div>
			</div>

		</div>
		<!--底部-->
		<div class="no_photos" id="no_photo">
			<img src="img_page/no_photo.png" />
			<span>啊哦，还没有图片哟~</span>
		</div>
		<div class="material_bottom">
			<label class="single" onclick="choose_all(this)"><input type="checkbox" name="sex" value="male" />全选</label>
			<button class="material_photo_del" onclick="del_all()">删除</button>
		</div>


<!--弹出层-->
		<div id="bgMask" class="bg" style=""></div>
		<!--灰度背景-->
		<!--弹出层内容-->
		<div id="infoBox" style="" class="infobox_del">
			<div class="infobox_del_con">确认删除？</div>
			<div class="infobox_del_bottom">
				<button onclick="hideInfoBox();">取消</button>
				<button onclick="sureInfoBox();">确定</button>
			</div>
		</div>
	</body>
	<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
	<link rel="stylesheet" type="text/css" href="layer/skin/layer.css" />
	<script src="layer/layer.js"></script>
	<script>
		//			查询数据
		var material_list_a = new Vue({
			el: '.material_all',
			data: {
				material_list: [],
				ids: ''
			},
			created: function() {
				this.getList();
			},
			methods: {
				getList: function() {
					console.log("11111");
					var that = this;
					$.ajax({
						type: "get",
						url: v_url + "/wechat/material/getUserPhoto",
						data: {
c_user_id:c_user_id
						},
						async: true,
						success: function(res) {
							var list = res.data;
							var new_material_list = []
							for(var i = 0; i < list.length; i++) {
								new_material_list.push(list[i])
							}
							if(list.length<1){
							document.getElementById("my_material_all").style.display = "none";
							document.getElementById("no_photo").style.display = "block";	
							}else{
								document.getElementById("my_material_all").style.display = "block";
							document.getElementById("no_photo").style.display = "none";
							}
							that.material_list = new_material_list;
							console.log(that.material_list);
						}
					});

				},
				choose_del: function(index) {
					console.log(index)
						//$(obj).css("display","block");
						//obj.style.display='block';
						//$(".photo_hover").css("display","block");
						//$(".one_choose input").prop("checked",true);
					var ids = "";
					$(".photo_hover").each(function(i) {
						var hover = $(this);
						var dom = $(this).find("input");
						var id = $(this).parent().attr("data-id");
						console.log(id)
						if(i == index) {
							if(dom.prop("checked")) {
								hover.css("display", "none");
							} else {
								hover.css("display", "block");
							}
							dom.prop("checked", !dom.prop("checked"));
						}
						if(dom.prop("checked")) {
							if(!ids) {
								ids = id;
							} else {
								ids = ids + "," + id;
							}
						}
					})
					console.log(ids);
					this.ids = ids;
				}

			}

		})

		/*function choose_del(obj){
			console.log($(obj).html());
			var hover=$(obj).find(".photo_hover");
			var dom=$(obj).find(".photo_hover input");
			if(dom.prop("checked")){
				hover.css("display","none");
			}else{
				hover.css("display","block");
			}
			
			dom.prop("checked",!dom.prop("checked"));
				
			}*/
		function choose_all(obj) {

			var material_list = material_list_a.material_list;
			var all_ids = "";
			console.log(material_list)
			var dom = $(obj).find("input");
			if(dom.prop("checked")) {
				$(".photo_hover").each(function(i) {
					var hover = $(this);
					var dom2 = $(this).find("input");

					hover.css("display", "block");
					dom2.prop("checked", dom.prop("checked"));

				})
				for(var i = 0; i < material_list.length; i++) {
					var id = material_list[i].id;
					if(!all_ids) {
						all_ids = id;
					} else {
						all_ids = all_ids + "," + id;
					}
				}
			} else {
				$(".photo_hover").each(function(i) {
					var hover = $(this);
					var dom2 = $(this).find("input");

					hover.css("display", "none");
					dom2.prop("checked", dom.prop("checked"));

				})
				all_ids = "";
			}

			console.log(all_ids);

			material_list_a.ids = all_ids
		}

/**遮罩层弹出与隐藏*/
		//记录是否阻止滚动
		var disableScroll = false;

		//如果弹出对话框时，底层的视图就不让滚动了
		document.addEventListener('touchmove', function(e) {
			if(disableScroll) {
				e.preventDefault();
			}
		}, false); //显示弹出框
		function del_all() {
			//禁止滚动
			disableScroll = true;
			var ids = material_list_a.ids
			if(!ids){
				layer.msg('请至少选择一张图片')
			}else{
				//显示背景遮罩
			document.getElementById("bgMask").style.display = "block";
			//显示消息弹出框
			document.getElementById("infoBox").style.display = "block";
			}
			

			
		}

		//隐藏弹出框
		function hideInfoBox() {
			//允许滚动
			disableScroll = false;
			//隐藏背景遮罩
			document.getElementById("bgMask").style.display = "none";
			//隐藏消息弹出框
			document.getElementById("infoBox").style.display = "none";
		}
		function sureInfoBox() {
			console.log(222)
			var ids = material_list_a.ids

			$.ajax({
						type: "get",
						url: v_url + "/wechat/material/deletePhotos",
						data: {
							ids: ids,
							c_user_id:c_user_id
						},
						async: true,
						success: function(res) {
							if(res.code == 200) {
								window.location.reload()
							} else {
								layer.msg("删除失败")
							}
						}
					});

		}
	</script>

</html>